import { setToken, getToken, removeToken, setTimeStamp } from '@/utils/auth'
// 在import解构对象  变量 重命名
import { login as sendLoginRequest, getUserInfo, getUserDetailById } from '@/api/user'
import { Message } from 'element-ui'
import { resetRouter } from '@/router'
export default {
  namespaced: true,
  state: {
    // 刷新页面时重新获取token，实现持久化
    token: getToken(),
    //  userInfo为什么我们不设置为null，而是设置为 {}
    // 因为我们会在**`getters`**中引用userinfo的变量，如果设置为null，则会引起异常和报错
    userInfo: {}
  },
  mutations: {
    setToken(state, data) {
      // 1.将token放在vuex中，但不能持久化
      state.token = data
      // 2.直接在vuex中将token放在cookie
      setToken(data)
    },
    removeToken(state) {
      state.token = ''
      // 清理cookies
      removeToken()
    },
    setUserInfo(state, data) {
      state.userInfo = data
    },
    removeUserInfo(state) {
      state.userInfo = {}
    }
  },
  actions: {
    // 登录请求
    login(context, data) {
      // 这里return的作用：return的内容将会接到被调用处，如果没有return的话，会先执行被调用处的then
      return sendLoginRequest(data).then(data => {
        Message.success('登录成功')
        // 调用mutations 设置token
        context.commit('setToken', data)
        // 设置时间戳
        setTimeStamp()
      })
    },
    // 获取用户基本信息 - 使用async/await 获取数据
    getUserInfo: async(context) => {
      let userInfo = await getUserInfo()
      // 获取用户详情信息
      const userDetailInfo = await getUserDetailById(userInfo.userId)
      // 将用户基本信息和详情信息合并
      userInfo = {
        ...userInfo,
        ...userDetailInfo
      }
      context.commit('setUserInfo', userInfo)
      return userInfo
    },
    logout({ commit }) {
      // 1.清理token
      commit('removeToken')
      // 2.清理用户数据
      commit('removeUserInfo')
      // 3.重置路由
      resetRouter()
      // 4.其实还需要重置菜单, 只不过, 每次登陆
      // 菜单都是重新获取, 不清理不成问题
      // 如果想清理的话, 其实是要调用 vuex permission 模块 的 setRoutes
      // 如何跨模块 commit 别的 mutations
      commit('permission/setRoutes', [], {
        // commit 第三个参数可以放一个配置对象
        root: true
      })
    }
  }
}

